<template>
  <div class="app">
    <h1>{{ msg }}</h1>
    <h1>学生姓名：{{ studentName }}</h1>
    <!--通过父组件给子组件绑定一个自定义事件实现子给父传递数据-->
    <Student v-on:sendNameToApp="sendStudent"/>
    <!--只触发一次-->
<!--        <Student v-on:sendNameToApp.once="sendStudent"/>-->
    <!--简写形式-->
    <!--<Student @sendNameToApp="sendStudent"/>-->
    <!--通过父组件给子组件绑定一个自定义事件实现子给父传递数据-->
<!--        <Student ref="student"/>-->
    <School/>
  </div>
</template>

<script>
import Student from "@/components/Student";
import School from "@/components/School";

export default {
  name: 'App',
  components: {
    Student,
    School
  },
  data() {
    return {
      msg: '你好啊',
      studentName: '',
    }
  },
  methods: {
    sendStudent(name) {
      this.studentName = name;
    }
  },
  mounted() {
    // this.$refs.student.$on('sendNameToApp', this.sendStudent);
    // 事件只触发一次就不再触发
    // this.$refs.student.$once('sendNameToApp', this.sendStudent);
  }
}
</script>

<style>
.app {
  padding: 10px;
  background-color: #adadad;
}
</style>
